<template>
  <div id="app">
    <div class="findPassword">
      <div class="header">
        <header>
          <div class="iconfont icon-iconfontjiantou1 back" @click="back"></div>
          <h3>设置密码</h3>
          <div class="right"></div>
        </header>
        <div class="header_box"></div>
      </div>

      <div class="box">
        <div class="int_num">
          <Input type="tel" v-model="phone" placeholder="请输入手机号" maxlength="11" />
          <span class="code" @click="getCaptcha">获取验证码</span>
        </div>
        <div class="int_num">
          <Input type="number" v-model="codeText" placeholder="请输入验证码" />
        </div>
        <div class="int_num">
          <Input type="password" v-model="password" placeholder="请输入密码" />
        </div>
      </div>

      <div class="login" @click="onLogon">
        <span>确定</span>
      </div>
    </div>
  </div>
</template>

<script>
import Input from "../../components/logon/Input";
import { Toast } from "vant";
export default {
  data() {
    return {
      phone: "",
      codeText: "",
      password: "",
    };
  },
  components: {
    Input,
  },
  methods: {
    // 点击确定
    onLogon() {
      //
      if (!/^1[3456789]\d{9}$/.test(this.phone)) {
        // console.log(this.phone)
        Toast.fail("手机号格式不对!");
        return;
      }

      if (this.type !== 2) {
        if (!/^[a-zA-z0-9]{8,16}$/.test(this.password)) {
          // console.log(this.password)
          Toast.fail("密码格式不对!");
          return;
        }
      }
    },

    // 获取验证码
    getCaptcha() {
      this.$HTTP
        .smsCode({
          mobile: this.phone,
          sms_type: "login",
        })
        .then((res) => {
          console.log(res);
         
        });
        
    },
    // 点击返回按钮
    back() {
      window.history.back("/fit");
    },
  },
};
</script>

<style lang="scss" scoped>
#app {
  background: #fff;
  min-height: 100vh;
  box-sizing: border-box;
}
.header {
  height: 11.73333vw;
  line-height: 11.73333vw;
  background: #fff;
  header {
    height: 11.73333vw;
    position: fixed;
    z-index: 999;
    width: 100%;
    background: #fff;
    .back {
      float: left;
      width: 10.66667vw;
      text-align: center;
    }
    h3 {
      font-size: 4.8vw;
      color: #595959;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 66.66667vw;
    }
    .right {
      height: 100%;
      float: right;
      font-size: 4vw;
      color: #595959;
      padding: 0 2.66667vw;
    }
  }
  .header_box {
    width: 100%;
    height: 100%;
  }
}
.box {
  .int_num {
    position: relative;
    .code {
      position: absolute;
      top: 40px;

      right: 70px;
      color: #eb6100;
    }
    // .code {
    //   color: #eb6100;
    //   position: absolute;
    //   right: 0;
    //   margin-top: 10px;
    //   padding: 0;
    //   font-size: 3.2vw;
    //   font-family: PingFangSC-Regular;
    //   font-weight: 400;
    // }
  }
}
.login {
  width: 81.73333vw;
  height: 12vw;
  margin: 15.73333vw auto 0;
  background: url();
  background-size: 100% 100%;
  font-size: 3.73333vw;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  text-align: center;
  color: #fff;
  letter-spacing: 0.53333vw;
  span {
    display: inline-block;
    width: 74.66667vw;
    height: 12vw;
    line-height: 12vw;
  }
}
</style>